﻿import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/getx_scaffold.dart';

/// 生理周期设置欢迎页面
class MenstrualCycleSetupWelcomeView extends StatelessWidget {
  const MenstrualCycleSetupWelcomeView({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(24.w),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 返回按钮
              GestureDetector(
                onTap: () => Get.back(),
                child: Container(
                  width: 40.w,
                  height: 40.w,
                  decoration: BoxDecoration(
                    color: Colors.grey[800],
                    borderRadius: BorderRadius.circular(12.r),
                  ),
                  child: Icon(
                    Icons.arrow_back_ios_new,
                    color: Colors.white,
                    size: 20.sp,
                  ),
                ),
              ),
              
              SizedBox(height: 40.h),
              
              // 标题
              Text(
                '欢迎使用生理周期',
                style: TextStyle(
                  fontSize: 32.sp,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              
              SizedBox(height: 40.h),
              
              // 功能介绍项
              _buildFeatureItem(
                icon: Icons.analytics_outlined,
                title: '预测生理期和排卵',
                description: '如果您设置了生理周期，"生理周期"功能即可预测下次生理期和排卵期。',
                color: const Color(0xFFFF6B9D),
              ),
              
              SizedBox(height: 24.h),
              
              _buildFeatureItem(
                icon: Icons.schedule_outlined,
                title: '生理期的时间线',
                description: '该信息以时间线的形式呈现，供您查看和理解。',
                color: const Color(0xFF9B59B6),
              ),
              
              SizedBox(height: 24.h),
              
              _buildFeatureItem(
                icon: Icons.phone_android_outlined,
                title: 'App',
                description: '在App更改和查看生理期记录，并查看您的生理周期预测。',
                color: const Color(0xFF3498DB),
              ),
              
              const Spacer(),
              
              // 开始按钮
              Container(
                width: double.infinity,
                height: 56.h,
                child: ElevatedButton(
                  onPressed: () {
                    Get.toNamed('/menstrual-cycle-setup');
                  },
                  style: ElevatedButton.styleFrom(
                    backgroundColor: const Color(0xFFFF6B35),
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(28.r),
                    ),
                    elevation: 0,
                  ),
                  child: Text(
                    '开始',
                    style: TextStyle(
                      fontSize: 18.sp,
                      fontWeight: FontWeight.w600,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              
              SizedBox(height: 24.h),
            ],
          ),
        ),
      ),
    );
  }

  /// 构建功能介绍项
  Widget _buildFeatureItem({
    required IconData icon,
    required String title,
    required String description,
    required Color color,
  }) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Container(
          width: 48.w,
          height: 48.w,
          decoration: BoxDecoration(
            color: color.withOpacity(0.2),
            borderRadius: BorderRadius.circular(12.r),
          ),
          child: Icon(
            icon,
            color: color,
            size: 24.sp,
          ),
        ),
        
        SizedBox(width: 16.w),
        
        Expanded(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: TextStyle(
                  fontSize: 18.sp,
                  fontWeight: FontWeight.w600,
                  color: Colors.white,
                ),
              ),
              
              SizedBox(height: 8.h),
              
              Text(
                description,
                style: TextStyle(
                  fontSize: 14.sp,
                  color: Colors.grey[300],
                  height: 1.5,
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}
